<style>
    .box{
        /*display: flex;*/
        /*flex-wrap: wrap;*/
    }
    .box >div{
        margin-bottom: 20px;
        margin-right: 20px;
    }
</style>
<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
    
        <div class="layui-form-item">
            <label class="layui-form-label required">服务LOGO</label>
            <div class="layui-input-block layuimini-upload">
                <input name="image" class="layui-input layui-col-xs6" readonly  placeholder="请上传服务LOGO" value="{$row.zhu_img|default=''}">
                <div class="layuimini-upload-btn">
                    <span><a class="layui-btn" data-upload="image" data-upload-number="one" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
                </div>
            </div>
        </div>
       
 
        <div class="layui-form-item">
            <label class="layui-form-label required">服务名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" class="layui-input" placeholder="请输入服务产品名称" value="{$row.title|default=''}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">服务价格</label>
            <div class="layui-input-block">
                <input type="number" name="price" class="layui-input" placeholder="请输入服务价格" value="{$row.price|default=''}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否线上</label>
                <div class="layui-input-block">
                    <input type="radio" name="is_online" lay-filter="levelM" class="layui-input" value="0" title="线下" {if condition="$row.is_online eq 0"}checked{/if}>
                    <input type="radio" name="is_online" lay-filter="levelM" class="layui-input" value="1" title="线上" {if condition="$row.is_online eq 1"}checked{/if}>
                </div>
        </div>
        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>
        
    </form>
</div>
<script type="text/javascript">
    layui.use(['form','upload'], function(){
        var form = layui.form;
        var upload = layui.upload;
        $ = layui.$;
        layer = layui.layer;
        //各种基于事件的操作。
          // 指定视频上传的接口
        upload.render({
            elem: '#test-upload-video'
            ,url: 'upload' // 改为你的接口地址
            ,accept: 'video' // 只允许上传视频文件
            ,done: function(res){
            //上传完毕回调
                $("#video_url").val(res.src); 
                console.log('视频上传成功');
                return layer.msg('视频上传成功');
            }
            ,error: function(){
            // 请求出错的处理
            return layer.msg('上传失败，网络异常');
            }
        });

        window.see_video=function(){
            var url = $('#video_url').val();
            if(!url){
                layer.msg("请上传视频");
                return
            }
            var html = '<div>\
                    <video width="500" height="500" controls autobuffer autoplay="autoplay" style="vertical-align: middle;">\
                        <source src="'+url+'" type="video/mp4" />\
                    </video>\
                </div>';
            //弹出层
            layer.open({
                title: "视频预览", type: 1, skin: 'layui-layer-demo', //样式类名
                anim: 2, area: ['500px', '543px'], shadeClose: true, //开启遮罩关闭
                content: html
            })
            return false;
        }; 
    });
</script>
